<template>
    <div>
      <GmapMap
      ref="myMapRef"
        :center="{ lat: 40.7128, lng: -74.0060 }"
        :zoom="12"
        :options='mapOptions'
        style="width: 100%; height: 400px"
      >
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>这是一段信息</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </GmapMap>
    </div>
  </template>
  
  <script>
  import { log } from 'console';
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
import { gmapApi } from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
    load: {
        key: 'AIzaSyC6EIUR3I08i9DJpdnTs_stLH9jzNE594M',
        libraries: 'places,drawing,visualization', // This is required if you use the Autocomplete plugin
    }
})

  export default {
    data() {
      return {
        dialogVisible: false,
        mapOptions: {
                mapTypeControl: false,
                streetViewControl: false,
                zoomControl: false,
                fullscreenControl: false,
                clickableIcons: false, //点击地点不出现浮窗
                scaleControl: true,
        },
        drawingManager:undefined,
        center:{},
        radius:undefined,
        currentOverlay:undefined,
        center:{
          lat:40.713029363264646,
          lng:-74.00585428559911,
        },
        radius:88.79247516056957,
        newCircle:undefined,
        mapOverlays:[],
        circles:[],
        polygonCoordinate:[

        [
    {
        "lat": 40.71670340676827,
        "lng": -73.93928095180915
    },
    {
        "lat": 40.69718408445952,
        "lng": -73.93893762905525
    },
    {
        "lat": 40.6997869913162,
        "lng": -73.91593500454353
    },
    {
        "lat": 40.71462161830478,
        "lng": -73.89979883510993
    },
    {
        "lat": 40.7237289622305,
        "lng": -73.90975519497321
    }
]
        ]
      };
    },
    mounted(){
        //地图加载之后得回调方法
      this.mapOnReady();
    },
    methods: {
      //地图的加载回调方法
      mapOnReady(){
          this.$refs.myMapRef.$mapPromise.then((map) => {
          // 地图已准备就绪，可以在这里访问原生地图对象进行操作
          console.log(map);
          console.log("地图已经准备就绪");
          this.addDrawingManager(map);
        });
      },
      //创建绘制工具以及绘制属性的方法
      addDrawingManager(map) {
        //创建绘制图形的工具并且设置一些属性
        this.drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.MARKER,
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT,
            drawingModes: [
              google.maps.drawing.OverlayType.CIRCLE,
              google.maps.drawing.OverlayType.POLYGON,

            ],
          },
          markerOptions: { icon: 'https://example.com/path/to/icon.png' ,draggable: true, },
          circleOptions: {
            draggable: true, // 设置圆可拖拽
            fillColor: '#FF0000', // 设置填充颜色为红色
            fillOpacity: 0.5,      // 设置填充透明度为50%
            strokeColor: '#00FF00', // 设置边界颜色为绿色
            strokeOpacity: 1,       // 设置边界透明度为100%
            strokeWeight: 2         // 设置边界宽度为2个像素
          },
          
          polygonOptions:{
            draggable: true, // 设置圆可拖拽
            fillColor: '#FF0000', // 设置填充颜色为红色
            fillOpacity: 0.5,      // 设置填充透明度为50%
            strokeColor: '#00FF00', // 设置边界颜色为绿色
            strokeOpacity: 1,       // 设置边界透明度为100%
            strokeWeight: 2    
          }
          // Specify other options as needed
        });
        //将绘制图形设置到地图上
        this.drawingManager.setMap(map);
        //给绘制的图像添加监听事件
        google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (event) => {
          // 移除之前的绘制图形
          if (this.currentOverlay) {
            this.currentOverlay.setMap(null);
          }
          // 设置新的绘制图形并添加点击事件
          this.currentOverlay = event.overlay;
          google.maps.event.addListener(this.currentOverlay, 'click', () => {
            console.log('图形被点击');
            if (event.type === google.maps.drawing.OverlayType.CIRCLE) {
              var center = this.currentOverlay.getCenter();
              this.center.lat = center.lat();
              this.center.lng = center.lng();
              this.center.radius = this.currentOverlay.getRadius();
            }else{
              for (let i = 0; i < this.currentOverlay.getPath().length; i++) {
                  this.polygonCoordinate.push(
                    {
                      lat:this.currentOverlay.getPath().getAt(i).lat(),
                      lng:this.currentOverlay.getPath().getAt(i).lng(),
                    })                
              }
               
              console.log(this.polygonCoordinate);
            }
          
            // 在这里添加你需要执行的代码，例如显示信息窗口等
            this.dialogVisible = true;
          });
          google.maps.event.addListener(this.currentOverlay, 'dragend', () => {
            console.log('Polygon dragged.');
            // 执行拖动后的操作，比如更新图形的存储位置等
          });
          // if (event.type === google.maps.drawing.OverlayType.CIRCLE) {
          //     event.overlay.setOptions({draggable: true});
          //   }
          //   if (event.type === google.maps.drawing.OverlayType.RECTANGLE) {
          //     event.overlay.setOptions({draggable: true});
          //   }
        });

        //绘制多边形的回显
//         let polygon = new google.maps.Polygon({
//     paths: this.polygonCoordinate,
//     strokeColor: "#FF0000",
//     strokeOpacity: 0.8,
//     strokeWeight: 2,
//     fillColor: "#FF0000",
//     fillOpacity: 0.35,
//     map:map
// });
// this.mapOverlays.push(polygon);

 //在圆形绘制完成事件中保存绘制的圆形
      const that = this;
        google.maps.event.addListener(that.drawingManager, 'circlecomplete', function(circle) {
          that.circles.push(circle);
        });
        console.log(this.circles.length);
      // 清除所有绘制的圆形
    
      for (var i = 0; i < this.mapOverlays.length; i++) {
          this.mapOverlays[i].setMap(null);
        }
        this.mapOverlays = [];
      },
      //用来回显绘制的圆形
      showCircle(){
        //用来回显圆形
        this.newCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: this.center, // 设置中心点
            radius: this.radius, // 设置半径
        });
        this.mapOverlays.push(this.newCircle);
      },
      //用来清空所有的绘制圆形图形
      clearCircle(){
        for (var i = 0; i < this.mapOverlays.length; i++) {
          this.mapOverlays[i].setMap(null);
        }
        this.mapOverlays = [];
      },
      handleClose(){}
    }
  };
  </script>
  <style>
  .gmnoprint{
    margin: 5px; 
    z-index: 10; 
    position: absolute!important; 
    right: 100px!important; 
    top: 50px!important;
  }
  </style>
  